<template>
  <div id="app">
    <!-- 放一个坑 ,用来承载路径匹配到的路由组件 -->
    <RouterView />

    <h1>我是 App</h1>

    <!-- 
      浏览器历史记录的问题
      
      历史记录的默认模式, 追加模式
      [
        '#/',
        '#/home',
        '#/about'
      ]

      历史记录的替换模式
      [
        '#/',
        '#/home'   push
        '#/about'
      ]

      默认模式: / -> home -> about
      替换模式: / -> about

     -->

    <!-- 
      声明式导航 replace
     -->
    <RouterLink to="/home">首页</RouterLink>
    <RouterLink to="/about" replace>关于页面</RouterLink>

    <!-- 
      编程式导航 replace
     -->
    <button @click="$router.push('/home')">首页</button>
    <button @click="$router.replace('/about')">关于页面</button>
  </div>
</template>

<script>
export default {
  name: "App",

  created() {
    console.log(this);
  },
};
</script>

<style>
.router-link-active {
  color: red;
}
</style>
